<template>
  <div id="form">
    <!-- 筛选模块 -->
    <page-header
      @createSortEmit="createSort"
      @searchEmit="search"
    ></page-header>
    <!-- 表格内容 -->
    <page-table
      :tableData="tableData.value"
      :tableList="tableList"
      @handleEditEmit="handleEdit"
      @handleDeleteEmit="handleDelete"
    ></page-table>

    <!-- 抽屉 -->
    <page-drawer
      :visibilityBinding="visibilityBinding"
      :editData="editData"
      @handleEditEmits="handleEditDrawer"
      @handleCloseEmits="visibilityBinding = false"
    ></page-drawer>
    <!-- 新增分类 -->
    <page-dialog
      :dialogVisible="dialogVisible"
      @editSubmitEmit="editSubmit"
      @handleCloseEmits="dialogVisible = false"
    ></page-dialog>
  </div>
</template>

<script setup>
import { tableList } from './sort/sort.js' //表格配置
import pageHeader from './sort/page-header/index.vue'
import pageTable from './sort/page-table/index.vue'
import pageDrawer from './sort/page-drawer/index.vue'
import pageDialog from './sort/page-dialog/index.vue'
import { reactive } from 'vue'

const visibilityBinding = ref(false)
const dialogVisible = ref(false)
const tableData = ref([])

const store = useStore()

const editData = reactive({
  content: '',
  id: ''
})
// 获取列表信息
const getTableData = () => {
  store.dispatch('article/getSortListActions')
  tableData.value = computed(() => store.state.article.sortData)
}
getTableData()
//点击添加
const createSort = () => {
  dialogVisible.value = true
}
const abc = 65_535
//添加提交
const editSubmit = (page) => {
  dialogVisible.value = false
  // 调用接口
  store.dispatch('article/sortAddSubmitActions', { content: page.value })
}

//点击修改
const handleEdit = (page) => {
  editData.content = page.content
  editData.id = page.id
  visibilityBinding.value = true
}
// 点击提交
const handleEditDrawer = (data) => {
  store.dispatch('article/editDataActions', { ...data })
}
// 点击搜索
const search = (page) => {
  store.dispatch('article/serachDataActions', page)
}
// 点击删除
const handleDelete = (page) => {
  ElMessageBox.confirm('删除的数据不能恢复！确认删除吗？', '警告', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      store.dispatch('article/removeSortActions', page)
      ElMessage({
        type: 'success',
        message: '确认删除'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除'
      })
    })
}
</script>

<style scoped>
#form {
  padding: 20px;
}
.head {
  margin: 20px 0;
}
.form-search {
  display: flex;
  align-content: center;
  justify-content: right;
}
.form-search-input {
  text-align: right;
  width: 200px;
}
.form-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 20px auto;
}
.edit {
  padding: 20px 0;
}
.form-drawer {
  padding: 20px;
}
</style>
